<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
    </head>
    <body>
        <script type="text/javascript" src="js/index.js"></script>
        <h1>产量表</h1>
        <p>龙垠廷</p>
    </body>
</html>
<!DOCTYPE html>
<html>
<head>
	<title>Inventory Table</title>
	<style>
		table, th, td {
		  	border: 1px solid black;
		  	border-collapse: collapse;
		  	padding: 10px;
		  	text-align: center;
		}
		th {
		  	background-color: #ccc;
		}
		input[type="text"] {
		  	border: none;
		  	background-color: transparent;
		  	text-align: center;
		  	width: 100%;
		}
		.chart {
		  	margin-top: 50px;
		  	display: flex;
		  	align-items: flex-end;
		  	height: 300px;
		  	width: 500px;
		  	border: 1px solid black;
		}
		.bar {
		  	width: 50px;
		  	margin-right: 10px;
		  	background-color: #007bff;
		}
	</style>
</head>
<body>
	<h1>Inventory Table</h1>
	<table>
		<thead>
			<tr>
				<th>Item</th>
				<th>I Line</th>
				<th>F Line</th>
				<th>X Line</th>
				<th>Y Line</th>
				<th>On-Site</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Item 1</td>
				<td><input type="text" name="i-line"></td>
				<td><input type="text" name="f-line"></td>
				<td><input type="text" name="x-line"></td>
				<td><input type="text" name="y-line"></td>
				<td><input type="text" name="on-site"></td>
			</tr>
			<tr>
				<td>Item 2</td>
				<td><input type="text" name="i-line"></td>
				<td><input type="text" name="f-line"></td>
				<td><input type="text" name="x-line"></td>
				<td><input type="text" name="y-line"></td>
				<td><input type="text" name="on-site"></td>
			</tr>
			<tr>
				<td>Item 3</td>
				<td><input type="text" name="i-line"></td>
				<td><input type="text" name="f-line"></td>
				<td><input type="text" name="x-line"></td>
				<td><input type="text" name="y-line"></td>
				<td><input type="text" name="on-site"></td>
			</tr>
		</tbody>
	</table>
	<button onclick="drawChart()">Draw Chart</button>
	<div class="chart" id="chart">
	</div>
	<button onclick="saveInventory()">Save Inventory</button>
	<script>
		function drawChart() {
			var iLine = parseInt(document.getElementsByName("i-line")[0].value);
			var fLine = parseInt(document.getElementsByName("f-line")[0].value);
			var xLine = parseInt(document.getElementsByName("x-line")[0].value);
			var yLine = parseInt(document.getElementsByName("y-line")[0].value);
			var onSite = parseInt(document.getElementsByName("on-site")[0].value);
			var max = Math.max(iLine, fLine, xLine, yLine, onSite);
			var iLineHeight = iLine/max * 100;
			var fLineHeight = fLine/max * 100;
			var xLineHeight = xLine/max * 100;
			var yLineHeight = yLine/max * 100;
			var onSiteHeight = onSite/max * 100;
			document.getElementById("chart").innerHTML = '<div class="bar" style="height:' + iLineHeight + '%"></div><div class="bar" style="height:' + fLineHeight + '%"></div><div class="bar" style="height:' + xLineHeight + '%"></div><div class="bar" style="height:' + yLineHeight + '%"></div><div class="bar" style="height:' + onSiteHeight + '%"></div>';
		}

		function saveInventory() {
			var iLine = document.getElementsByName("i-line")[0].value;
			var fLine = document.getElementsByName("f-line")[0].value;
			var xLine = document.getElementsByName("x-line")[0].value;
			var yLine = document.getElementsByName("y-line")[0].value;
			var onSite = document.getElementsByName("on-site")[0].value;
			var inventory = "Item\tI Line\tF Line\tX Line\tY Line\tOn-Site\n1\t" + iLine + "\t" + fLine + "\t" + xLine + "\t" + yLine + "\t" + onSite;
			var file = new Blob([inventory], {type: "text/plain"});
			if (window.navigator.msSaveOrOpenBlob) // IE10+
			    window.navigator.msSaveOrOpenBlob(file, "inventory.txt");
			else { // Others
			    var a = document.createElement("a"),
			        url = URL.createObjectURL(file);
			    a.href = url;
			    a.download = "inventory.txt";
			    document.body.appendChild(a);
			    a.click();
			    setTimeout(function() {
			        document.body.removeChild(a);
			        window.URL.revokeObjectURL(url);  
			    }, 0); 
			}
		}
	</script>
</body>
</html>